import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { 
  BookOpen, 
  Users, 
  ClipboardCheck, 
  Clock,
  TrendingUp,
  FileText,
  Calendar,
  AlertTriangle
} from 'lucide-react';

export function TeacherDashboard() {
  return (
    <div className="space-y-6">
      {/* Welcome Section */}
      <div className="bg-gradient-to-r from-green-500 to-green-600 text-white p-6 rounded-lg">
        <h1 className="text-2xl font-medium mb-2">教师工作台</h1>
        <p>今天有3节课程，2个班级待录成绩，1个请假申请待审批</p>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">授课课程</p>
                <p className="text-2xl font-medium">5</p>
              </div>
              <BookOpen className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">教学班级</p>
                <p className="text-2xl font-medium">12</p>
              </div>
              <Users className="h-8 w-8 text-green-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">学生总数</p>
                <p className="text-2xl font-medium">386</p>
              </div>
              <ClipboardCheck className="h-8 w-8 text-orange-500" />
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">待处理事项</p>
                <p className="text-2xl font-medium">7</p>
              </div>
              <AlertTriangle className="h-8 w-8 text-red-500" />
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Today's Classes */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Clock className="mr-2 h-5 w-5" />
              今日课程安排
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div>
                  <p className="font-medium">高等数学A · 计算机21-1班</p>
                  <p className="text-sm text-muted-foreground">08:00 - 09:40 · 教学楼A-101</p>
                </div>
                <Badge>进行中</Badge>
              </div>
              
              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <p className="font-medium">高等数学A · 计算机21-2班</p>
                  <p className="text-sm text-muted-foreground">10:00 - 11:40 · 教学楼A-101</p>
                </div>
                <Badge variant="outline">即将开始</Badge>
              </div>
              
              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <p className="font-medium">线性代数 · 数学21-1班</p>
                  <p className="text-sm text-muted-foreground">14:00 - 15:40 · 教学楼B-203</p>
                </div>
                <Badge variant="secondary">下午</Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Pending Tasks */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <FileText className="mr-2 h-5 w-5" />
              待处理事项
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-red-50 rounded-lg">
                <div>
                  <p className="font-medium">成绩录入</p>
                  <p className="text-sm text-muted-foreground">计算机21-1班 · 期中考试</p>
                </div>
                <Badge variant="destructive">紧急</Badge>
              </div>
              
              <div className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
                <div>
                  <p className="font-medium">请假审批</p>
                  <p className="text-sm text-muted-foreground">张三 · 病假申请</p>
                </div>
                <Badge variant="outline">待处理</Badge>
              </div>
              
              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <p className="font-medium">课程资料上传</p>
                  <p className="text-sm text-muted-foreground">第8章课件</p>
                </div>
                <Badge variant="secondary">普通</Badge>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Class Performance Overview */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <TrendingUp className="mr-2 h-5 w-5" />
            班级成绩概况
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="p-4 border rounded-lg">
              <div className="flex justify-between items-center mb-2">
                <h4 className="font-medium">计算机21-1班</h4>
                <Badge variant="outline">42人</Badge>
              </div>
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span>平均分</span>
                  <span className="text-green-600">86.5</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>及格率</span>
                  <span className="text-blue-600">95.2%</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>出勤率</span>
                  <span className="text-orange-600">97.8%</span>
                </div>
              </div>
            </div>
            
            <div className="p-4 border rounded-lg">
              <div className="flex justify-between items-center mb-2">
                <h4 className="font-medium">计算机21-2班</h4>
                <Badge variant="outline">38人</Badge>
              </div>
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span>平均分</span>
                  <span className="text-green-600">84.2</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>及格率</span>
                  <span className="text-blue-600">92.1%</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>出勤率</span>
                  <span className="text-orange-600">95.5%</span>
                </div>
              </div>
            </div>
            
            <div className="p-4 border rounded-lg">
              <div className="flex justify-between items-center mb-2">
                <h4 className="font-medium">数学21-1班</h4>
                <Badge variant="outline">45人</Badge>
              </div>
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span>平均分</span>
                  <span className="text-green-600">88.7</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>及格率</span>
                  <span className="text-blue-600">97.8%</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>出勤率</span>
                  <span className="text-orange-600">98.9%</span>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Recent Activities */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Calendar className="mr-2 h-5 w-5" />
            最近活动
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <div className="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg">
              <Clock className="w-4 h-4 mt-1 text-blue-500" />
              <div>
                <p className="font-medium text-blue-800">录入了计算机21-1班期中成绩</p>
                <p className="text-sm text-blue-600">2小时前</p>
              </div>
            </div>
            
            <div className="flex items-start space-x-3 p-3 bg-green-50 rounded-lg">
              <FileText className="w-4 h-4 mt-1 text-green-500" />
              <div>
                <p className="font-medium text-green-800">上传了第7章课程资料</p>
                <p className="text-sm text-green-600">昨天</p>
              </div>
            </div>
            
            <div className="flex items-start space-x-3 p-3 bg-orange-50 rounded-lg">
              <ClipboardCheck className="w-4 h-4 mt-1 text-orange-500" />
              <div>
                <p className="font-medium text-orange-800">完成了数学21-1班考勤登记</p>
                <p className="text-sm text-orange-600">2天前</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}